<template>
	<view class="settled-merchant">
		<view class="form-title">超级管理员信息</view>
		<view class="create-form">
			<!-- 超级管理员类型 -->
			<!-- <view class="create-item">
				<view class="info-item-title">
					<text>超级管理员类型</text>
					<van-icon class="explain-icon" name="question-o" />
				</view>
				<input class="info-item-input" type="text" @click="adminTypePopShow = true"
					placeholder-class="placeholderFontClass" disabled readonly placeholder="请选择超级管理员类型"
					v-model="adminTypeSelected">
				<uni-icons class="right-arrow-icon" type="forward" size="14" color="#999"></uni-icons>
			</view> -->

			<!-- 选择超级管理员类型为经办人时需填写 -->
			<view v-if="adminTypeSelected == '经办人'">
				<!-- 经办人证件类型 -->
				<view class="create-item">
					<view class="info-item-title">
						<text>经办人证件类型</text>
						<van-icon class="explain-icon" name="question-o" />
					</view>
					<input class="info-item-input" type="text" @click="adminIDcardPopShow = true"
						placeholder-class="placeholderFontClass" disabled readonly placeholder="请选择经办人证件类型"
						v-model="adminIDcardNameSelected">
					<uni-icons class="right-arrow-icon" type="forward" size="14" color="#999"></uni-icons>
				</view>

				<!-- 经办人身份证件号码 -->
				<view class="create-item">
					<text class="info-item-title">经办人身份证件号码</text>
					<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
						placeholder="请填写经办人身份证件号码" v-model="contact_id_number">
				</view>

				<!-- 经办人证件正面照片 -->
				<view class="create-item item-column">
					<text class="info-item-title">经办人证件正面照片</text>
					<view class="detail-tally-imgs">
						<view v-if="!isIdCardFrontShow" class="grid-item-box"
							@tap.stop="ViewImage(urlPrefix + contact_id_doc_copy)">
							<image :src="urlPrefix + contact_id_doc_copy" class="tally-img" mode="aspectFill" />
							<van-icon class="delete-icon" name="clear"
								@tap.stop="DelImg('contact_id_doc_copy', 'isIdCardFrontShow', 'single', 'contact_id_doc_copy_media_id')" />
						</view>
						<view v-else class="grid-item-box detail-tally-img-add"
							@tap.stop="ChooseImage('contact_id_doc_copy', 'single', 'isIdCardFrontShow', 'contact_id_doc_copy_media_id')">
							<van-icon class="add-icon" name="plus" />
						</view>
					</view>
				</view>

				<!-- 经办人证件反面照片 -->
				<view class="create-item item-column">
					<text class="info-item-title">经办人证件反面照片</text>
					<view class="detail-tally-imgs">
						<view v-if="!isIdCardReverseShow" class="grid-item-box"
							@tap.stop="ViewImage(urlPrefix + contact_id_doc_copy_back)">
							<image :src="urlPrefix + contact_id_doc_copy_back" class="tally-img" mode="aspectFill" />
							<van-icon class="delete-icon" name="clear"
								@tap.stop="DelImg('contact_id_doc_copy_back', 'isIdCardReverseShow', 'single', 'contact_id_doc_copy_media_id')" />
						</view>
						<view v-else class="grid-item-box detail-tally-img-add"
							@tap.stop="ChooseImage('contact_id_doc_copy_back', 'single', 'isIdCardReverseShow', 'contact_id_doc_copy_back_media_id')">
							<van-icon class="add-icon" name="plus" />
						</view>
					</view>
				</view>

				<!-- 经办人证件有效期开始时间 -->
				<view class="create-item">
					<text class="info-item-title">经办人证件有效期开始时间</text>
					<picker mode="date" :value="contact_period_begin" @change="bindContactPeriodBeginChange">
						<view class="date-picker" v-if="contact_period_begin == ''"
							:class="{'placeholder-text': contact_period_begin_valid_date == '证件有效期开始时间'}">
							{{contact_period_begin_valid_date}}
						</view>
						<view class="date-picker" v-else style="color: #333;">
							{{contact_period_begin}}
						</view>
					</picker>
				</view>

				<!-- 经办人证件有效期结束时间 -->
				<view class="create-item">
					<text class="info-item-title">经办人证件有效期结束时间</text>
					<picker mode="date" :value="contact_period_end" @change="bindContactPeriodEndChange">
						<view class="date-picker" v-if="contact_period_end == ''"
							:class="{'placeholder-text': contact_period_end_valid_date == '证件有效期结束时间'}">
							{{contact_period_end_valid_date}}
						</view>
						<view class="date-picker" v-else style="color: #333;">
							{{contact_period_end}}
						</view>
					</picker>
				</view>

				<!-- 业务办理授权函 -->
				<view class="create-item item-column">
					<text class="info-item-title">业务办理授权函</text>
					<view class="detail-tally-imgs">
						<view v-if="!isBusinessAuthorizationLetterShow" class="grid-item-box"
							@tap.stop="ViewImage(urlPrefix + business_authorization_letter)">
							<image :src="urlPrefix + business_authorization_letter" class="tally-img"
								mode="aspectFill" />
							<van-icon class="delete-icon" name="clear"
								@tap.stop="DelImg('business_authorization_letter', 'isBusinessAuthorizationLetterShow', 'single', 'business_authorization_letter_media_id')" />
						</view>
						<view v-else class="grid-item-box detail-tally-img-add"
							@tap.stop="ChooseImage('business_authorization_letter', 'single', 'isBusinessAuthorizationLetterShow', 'business_authorization_letter_media_id')">
							<van-icon class="add-icon" name="plus" />
						</view>
					</view>
				</view>
			</view>

			<!-- 超级管理员姓名 -->
			<view class="create-item">
				<!-- <text class="info-item-title">超级管理员姓名</text> -->
				<text class="info-item-title">法人姓名</text>
				<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
					placeholder="请填写法人姓名" v-model="contact_name">
			</view>





			<!-- 联系手机 -->
			<view class="create-item">
				<text class="info-item-title">超级管理员联系手机</text>
				<input class="info-item-input" type="number" placeholder-class="placeholderFontClass"
					placeholder="请填写超级管理员联系手机" v-model="mobile_phone">
			</view>

			<!-- 联系邮箱 -->
			<view class="create-item">
				<text class="info-item-title">超级管理员联系邮箱</text>
				<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
					placeholder="请填写超级管理员联系邮箱" v-model="contact_email">
			</view>



		</view>

		<view class="form-title">营业执照</view>
		<view class="create-form">
			<!-- 营业执照照片 -->
			<view class="create-item item-column">
				<view class="info-item-title">营业执照照片</view>
				<view class="detail-tally-imgs">
					<view v-if="!isBusinessLicenseShow" class="grid-item-box"
						@tap.stop="ViewImage(urlPrefix + businessLicense, 'single')">
						<image :src="urlPrefix + businessLicense" class="tally-img" mode="aspectFill" />
						<van-icon class="delete-icon" name="clear"
							@tap.stop="DelImg('businessLicense', 'isBusinessLicenseShow', 'single', 'businessLicenseMediaId')" />
					</view>
					<view v-else class="grid-item-box detail-tally-img-add"
						@tap.stop="ChooseImage('businessLicense', 'single', 'isBusinessLicenseShow', 'businessLicenseMediaId')">
						<van-icon class="add-icon" name="plus" />
					</view>
				</view>
			</view>

			<!-- 注册号/统一社会信用代码 -->
			<view class="create-item">
				<text class="info-item-title">统一社会信用代码</text>
				<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
					placeholder="请填写统一社会信用代码" maxlength="18" v-model="license_number">
			</view>

			<!-- 商户名称 -->
			<view class="create-item">
				<text class="info-item-title">营业执照公司名称</text>
				<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
					placeholder="请填写营业执照中的名称" v-model="merchant_name">
			</view>

			<!-- 个体户经营者/法人姓名 -->
			<view class="create-item">
				<text class="info-item-title">法人姓名</text>
				<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
					placeholder="请填写法人姓名" v-model="legal_person">
			</view>

			<!-- 注册地址 -->
			<view class="create-item">
				<view class="info-item-title">
					<text>注册地址</text>
					<van-icon class="explain-icon" name="question-o" />
				</view>
				<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
					placeholder="请填写营业执照注册地址" v-model="license_address">
			</view>

			<!-- 营业执照有效期开始时间 -->
			<view class="create-item">
				<text class="info-item-title">有效期开始时间</text>
				<picker mode="date" :value="period_begin" @change="bindPeriodBeginChange">
					<view class="date-picker" v-if="period_begin == ''"
						:class="{'placeholder-text': period_begin_valid_date == '营业执照有效期开始时间'}">
						{{period_begin_valid_date}}
					</view>
					<view class="date-picker" v-else style="color: #333;">
						{{period_begin}}
					</view>
				</picker>
			</view>

			<!-- 营业执照有效期结束时间 -->
			<view class="create-item">
				<text class="info-item-title">有效期结束时间</text>
				<picker mode="date" :value="period_end" @change="bindPeriodEndChange">
					<view class="date-picker" v-if="period_end == ''"
						:class="{'placeholder-text': period_end_valid_date == '营业执照有效期结束时间'}">
						{{period_end_valid_date}}
					</view>
					<view class="date-picker" v-else style="color: #333;">
						{{period_end}}
					</view>
				</picker>
			</view>
		</view>

		<view class="form-title">法人身份证件</view>
		<view class="create-form">
			<!-- 证件类型 -->
			<!-- <view class="create-item">
				<view class="info-item-title">
					<text>证件类型</text>
					<van-icon class="explain-icon" name="question-o" />
				</view>
				<input class="info-item-input" type="text" @click="idDocTypePopShow = true"
					placeholder-class="placeholderFontClass" disabled readonly placeholder="请选择证件类型"
					v-model="id_doc_type">
				<uni-icons class="right-arrow-icon" type="forward" size="14" color="#999"></uni-icons>
			</view> -->

			<view v-if="id_doc_type == '中国大陆居民 - 身份证' || id_doc_type == ''">
				<!-- 身份证人像面照片 -->
				<view class="create-item item-column">
					<text class="info-item-title wrap">身份证人像面照片</text>
					<view class="detail-tally-imgs">
						<view v-if="!isIdCardCopyShow" class="grid-item-box"
							@tap.stop="ViewImage(urlPrefix + id_card_copy, 'single')">
							<image :src="urlPrefix + id_card_copy" class="tally-img" mode="aspectFill" />
							<van-icon class="delete-icon" name="clear"
								@tap.stop="DelImg('id_card_copy', 'isIdCardCopyShow', 'single', 'id_card_copy_media_id')" />
						</view>
						<view v-else class="grid-item-box detail-tally-img-add"
							@tap.stop="ChooseImage('id_card_copy', 'single', 'isIdCardCopyShow', 'id_card_copy_media_id')">
							<van-icon class="add-icon" name="plus" />
						</view>
					</view>
				</view>

				<!-- 身份证国徽面照片 -->
				<view class="create-item item-column">
					<text class="info-item-title">身份证国徽面照片</text>
					<view class="detail-tally-imgs">
						<view v-if="!isIdCardNationalShow" class="grid-item-box"
							@tap.stop="ViewImage(urlPrefix + id_card_national, 'single')">
							<image :src="urlPrefix + id_card_national" class="tally-img" mode="aspectFill" />
							<van-icon class="delete-icon" name="clear"
								@tap.stop="DelImg('id_card_national', 'isIdCardNationalShow', 'single', 'id_card_national_media_id')" />
						</view>
						<view v-else class="grid-item-box detail-tally-img-add"
							@tap.stop="ChooseImage('id_card_national', 'single', 'isIdCardNationalShow', 'id_card_national_media_id')">
							<van-icon class="add-icon" name="plus" />
						</view>
					</view>
				</view>

				<!-- 身份证姓名 -->
				<view class="create-item">
					<text class="info-item-title">身份证姓名</text>
					<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
						placeholder="请填写身份证姓名" v-model="id_card_name">
				</view>

				<!-- 身份证号码 -->
				<view class="create-item">
					<text class="info-item-title">身份证号码</text>
					<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
						placeholder="请填写身份证号码" v-model="id_card_number">
				</view>

				<!-- 身份证居住地址 -->
				<view class="create-item">
					<text class="info-item-title">身份证居住地址</text>
					<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
						placeholder="请填写身份证居住地址" v-model="id_card_address">
				</view>

				<!-- 身份证有效期开始时间 -->
				<view class="create-item">
					<text class="info-item-title">身份证有效期开始时间</text>
					<picker mode="date" :value="card_period_begin" @change="bindCardPeriodBeginChange">
						<view class="date-picker" v-if="card_period_begin == ''"
							:class="{'placeholder-text': cardPeriodBeginValidDate == '身份证有效期开始时间'}">
							{{cardPeriodBeginValidDate}}
						</view>
						<view class="date-picker" v-else style="color: #333;">
							{{card_period_begin}}
						</view>
					</picker>
				</view>

				<!-- 身份证有效期结束时间 -->
				<view class="create-item">
					<text class="info-item-title">身份证有效期结束时间</text>
					<picker mode="date" :value="card_period_end" @change="bindCardPeriodEndChange">
						<view class="date-picker" v-if="card_period_end == ''"
							:class="{'placeholder-text': cardPeriodEndValidDate == '身份证有效期结束时间'}">
							{{cardPeriodEndValidDate}}
						</view>
						<view class="date-picker" v-else style="color: #333;">
							{{card_period_end}}
						</view>
					</picker>
				</view>
			</view>


			<!-- 其他类型证件 -->
			<view v-else>
				<!-- 其他类型证件正面照片 -->
				<view class="create-item">
					<text class="info-item-title">其他类型证件正面照片</text>
					<view class="detail-tally-imgs">
						<view v-if="!isOtherIdDocCopyShow" class="grid-item-box"
							@tap.stop="ViewImage(urlPrefix + other_id_doc_copy)">
							<image :src="urlPrefix + other_id_doc_copy" class="tally-img" mode="aspectFill" />
							<van-icon class="delete-icon" name="clear" @tap.stop="DelImg(other_id_doc_copy)" />
						</view>
						<view v-else class="grid-item-box detail-tally-img-add"
							@tap.stop="ChooseImage('other_id_doc_copy')">
							<van-icon class="add-icon" name="plus" />
						</view>
					</view>
				</view>

				<!-- 其他类型证件反面照片 -->
				<view class="create-item">
					<text class="info-item-title">其他类型证件反面照片</text>
					<view class="detail-tally-imgs">
						<view v-if="!isOtherIdDocCopyBackShow" class="grid-item-box"
							@tap.stop="ViewImage(urlPrefix + other_id_doc_copy_back)">
							<image :src="urlPrefix + other_id_doc_copy_back" class="tally-img" mode="aspectFill" />
							<van-icon class="delete-icon" name="clear" @tap.stop="DelImg(other_id_doc_copy_back)" />
						</view>
						<view v-else class="grid-item-box detail-tally-img-add"
							@tap.stop="ChooseImage('other_id_doc_copy_back')">
							<van-icon class="add-icon" name="plus" />
						</view>
					</view>
				</view>

				<!-- 证件姓名 -->
				<view class="create-item">
					<text class="info-item-title">证件姓名</text>
					<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
						placeholder="请填写证件姓名" v-model="other_id_doc_name">
				</view>

				<!-- 证件号码 -->
				<view class="create-item">
					<text class="info-item-title">证件号码</text>
					<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
						placeholder="请填写证件号码" v-model="other_id_doc_number">
				</view>

				<!-- 证件居住地址 -->
				<view class="create-item">
					<text class="info-item-title">证件居住地址</text>
					<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
						placeholder="请填写证件居住地址" v-model="other_id_doc_address">
				</view>

				<!-- 证件有效期开始时间 -->
				<view class="create-item">
					<text class="info-item-title">身份证有效期开始时间</text>
					<picker mode="date" :value="other_doc_period_begin" @change="bindStartDateChange">
						<view class="date-picker" v-if="other_doc_period_begin == ''"
							:class="{'placeholder-text': otherDocPeriodBeginValidDate == '身份证有效期开始时间'}">
							{{cardPeriodBeginValidDate}}
						</view>
						<view class="date-picker" v-else style="color: #333;">
							{{other_doc_period_begin}}
						</view>
					</picker>
				</view>

				<!-- 证件有效期结束时间 -->
				<view class="create-item">
					<text class="info-item-title">身份证有效期结束时间</text>
					<picker mode="date" :value="other_doc_period_end" @change="bindEndDateChange">
						<view class="date-picker" v-if="other_doc_period_end == ''"
							:class="{'placeholder-text': cardPeriodEndValidDate == '身份证有效期结束时间'}">
							{{cardPeriodEndValidDate}}
						</view>
						<view class="date-picker" v-else style="color: #333;">
							{{other_doc_period_end}}
						</view>
					</picker>
				</view>
			</view>


			<!-- 法人是否为受益人 -->
			<!-- <view class="create-item">
				<view class="info-item-title">
					<text>法人是否为受益人</text>
					<van-icon class="explain-icon" name="question-o" />
				</view>
				<input class="info-item-input" type="text" @click="ownerPopShow = true"
					placeholder-class="placeholderFontClass" disabled readonly placeholder="请选择法人是否为受益人"
					v-model="owner">
				<uni-icons class="right-arrow-icon" type="forward" size="14" color="#999"></uni-icons>
			</view> -->

		</view>

		<!-- 最终受益人信息列表(UBO)  仅企业需要填写 -->
		<!-- <view class="form-title" v-if="owner == '是'">最终受益人信息</view> -->
		<!-- <view class="form-tips" v-if="owner == '是'" style="font-size: 12px; color: #999;margin: 10px 20px;">
			若经营者/法人不是最终受益所有人，则需补充受益所有人信息，最多上传4个。
			若经营者/法人是最终受益所有人之一，可在此添加其他受益所有人信息，最多上传3个</view> -->
		<view class="ubo-item" v-for="(item, index) in ubo_info_list" :key="index" v-if="false">
			<view class="ubo-item-title">
				<text>受益人{{index + 1}}</text>
				<text class="delete-text-btn" @click="deleteUboInfo(index)">删除</text>
			</view>
			<view class="create-form">
				<!-- 证件类型 -->
				<!-- <view class="create-item">
					<view class="info-item-title">
						<text>证件类型</text>
						<van-icon class="explain-icon" name="question-o" />
					</view>
					<input class="info-item-input" type="text" @click="openUboIdDocTypePopShow(index)"
						placeholder-class="placeholderFontClass" disabled readonly placeholder="请选择证件类型"
						v-model="item.ubo_id_doc_type">
					<uni-icons class="right-arrow-icon" type="forward" size="14" color="#999"></uni-icons>
				</view> -->

				<!-- 证件正面照片 -->
				<view class="create-item item-column">
					<text class="info-item-title">证件正面照片</text>
					<view class="detail-tally-imgs">
						<view v-if="!item.isUboIdDocShow" class="grid-item-box"
							@tap.stop="uboViewImage(index, 'ubo_id_doc_copy_src')">
							<image :src="urlPrefix + item.ubo_id_doc_copy_src" class="tally-img" mode="aspectFill" />
							<van-icon class="delete-icon" name="clear"
								@tap.stop="uboDelImg(index, 'ubo_id_doc_copy_src', 'isUboIdDocShow', 'ubo_id_doc_copy_src_media_id')" />
						</view>
						<view v-else class="grid-item-box detail-tally-img-add"
							@tap.stop="uboChooseImage(index, 'ubo_id_doc_copy_src', 'ubo_id_doc_copy_src_media_id')">
							<van-icon class="add-icon" name="plus" />
						</view>
					</view>
				</view>

				<!-- 证件反面照片 -->
				<view class="create-item item-column">
					<text class="info-item-title">证件反面照片</text>
					<view class="detail-tally-imgs">
						<view v-if="!item.isUboIdDocCopyBackShow" class="grid-item-box"
							@tap.stop="uboViewImage(index, 'ubo_id_doc_copy_back_src')">
							<image :src="urlPrefix + item.ubo_id_doc_copy_back_src" class="tally-img"
								mode="aspectFill" />
							<van-icon class="delete-icon" name="clear"
								@tap.stop="uboDelImg(index, 'ubo_id_doc_copy_back_src', 'isUboIdDocCopyBackShow', 'ubo_id_doc_copy_back_src_media_id')" />
						</view>
						<view v-else class="grid-item-box detail-tally-img-add"
							@tap.stop="uboChooseImage(index, 'ubo_id_doc_copy_back_src', 'ubo_id_doc_copy_back_src_media_id')">
							<van-icon class="add-icon" name="plus" />
						</view>
					</view>
				</view>

				<!-- 证件姓名 -->
				<view class="create-item">
					<text class="info-item-title">证件姓名</text>
					<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
						placeholder="请填写证件姓名" v-model="item.ubo_id_doc_name">
				</view>

				<!-- 证件号码 -->
				<view class="create-item">
					<text class="info-item-title">证件号码</text>
					<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
						placeholder="请填写证件号码" v-model="item.ubo_id_doc_number">
				</view>

				<!-- 证件居住地址 -->
				<view class="create-item">
					<text class="info-item-title">证件居住地址</text>
					<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
						placeholder="请填写证件居住地址" v-model="item.ubo_id_doc_address">
				</view>

				<!-- 证件有效期开始时间 -->
				<view class="create-item">
					<text class="info-item-title">证件有效期开始时间</text>
					<picker mode="date" :value="item.ubo_period_begin"
						@change="bindUboPeriodBeginDateChange($event, index)">
						<view class="date-picker" v-if="item.ubo_period_begin == ''"
							:class="{'placeholder-text': uboPeriodBeginValidDate == '证件有效期开始时间'}">
							{{uboPeriodBeginValidDate}}
						</view>
						<view class="date-picker" v-else style="color: #333;">
							{{item.ubo_period_begin}}
						</view>
					</picker>
				</view>

				<!-- 证件有效期结束时间 -->
				<view class="create-item">
					<text class="info-item-title">证件有效期结束时间</text>
					<picker mode="date" :value="item.ubo_period_end"
						@change="bindUboPeriodEndDateChange($event, index)">
						<view class="date-picker" v-if="item.ubo_period_end == ''"
							:class="{'placeholder-text': uboPeriodEndValidDate == '证件有效期结束时间'}">
							{{uboPeriodEndValidDate}}
						</view>
						<view class="date-picker" v-else style="color: #333;">
							{{item.ubo_period_end}}
						</view>
					</picker>
				</view>
			</view>
		</view>
		<!-- <view class="add-ubo-text-btn" v-if="owner == '是' && ubo_info_list.length < 3" @click="addUboInfo">
			<van-icon class="add-icon" name="plus" />
			<text>添加受益人</text>
		</view>
		<view class="add-ubo-text-btn" v-else-if="owner == '否' && ubo_info_list.length < 4" @click="addUboInfo">
			<van-icon class="add-icon" name="plus" />
			<text>添加受益人</text>
		</view> -->

		<view class="form-title">经营资料</view>
		<view class="create-form">
			<!-- 商户简称 -->
			<view class="create-item">
				<text class="info-item-title">商户简称</text>
				<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
					placeholder="请填写商户简称" v-model="merchant_shortname">
			</view>
			<!-- 客服电话 -->
			<view class="create-item">
				<text class="info-item-title">客服电话</text>
				<input class="info-item-input" type="number" placeholder-class="placeholderFontClass"
					placeholder="请填写客服电话" v-model="service_phone">
			</view>

			<!-- 小程序截图 -->
			<!-- <view class="create-item item-column">
				<text class="info-item-title">商家小程序截图</text>
				<view class="detail-tally-imgs">
					<view v-if="!isMiniProgramPicsShow" class="grid-item-box"
						@tap.stop="ViewImage(urlPrefix + mini_program_pic, 'single')">
						<image :src="urlPrefix + mini_program_pic" class="tally-img" mode="aspectFill" />
						<van-icon class="delete-icon" name="clear"
							@tap.stop="DelImg('mini_program_pic', 'isMiniProgramPicsShow', 'single', 'mini_program_pic_media_id')" />
					</view>
					<view v-else class="grid-item-box detail-tally-img-add"
						@tap.stop="ChooseImage('mini_program_pic', 'single', 'isMiniProgramPicsShow', 'mini_program_pic_media_id')">
						<van-icon class="add-icon" name="plus" />
					</view>
				</view>
			</view> -->

			<!-- 门店名称 -->
			<!-- <view class="create-item">
				<text class="info-item-title">门店名称</text>
				<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
					placeholder="例如:广州长溢" v-model="biz_store_name">
			</view> -->

			<!-- 门店地址 -->
			<!-- <view class="create-item">
				<text class="info-item-title">门店地址</text>
				<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
					placeholder="例如:xx省xx市xx区xx街道101" v-model="biz_store_address">
			</view> -->

			<!-- 所在地省市编码 -->
			<!-- <view class="create-item">
				<text class="info-item-title">所在地省市编码</text>
				<input class="info-item-input" type="number" placeholder-class="placeholderFontClass"
					placeholder="例如:440305" v-model="biz_address_code">
			</view> -->

			<!-- 门头照片 -->
			<!-- <view class="create-item item-column">
				<text class="info-item-title">门头照片</text>
				<view class="detail-tally-imgs">
					<view class="grid-item-box" v-for="(item,index) in store_entrance_pic_list" :key="index"
						@tap.stop="ViewImage(store_entrance_pic_list, 'multiple', item)">
						<image :src="urlPrefix + item" class="tally-img" mode="aspectFill" />
						<van-icon class="delete-icon" name="clear"
							@tap.stop="DelImg('store_entrance_pic_list', 'isStoreEntrancePicShow', 'multiple', index, 'store_entrance_pic_list_media_id_list')" />
					</view>
					<view v-if="isStoreEntrancePicShow" class="grid-item-box detail-tally-img-add"
						@tap.stop="ChooseImage('store_entrance_pic_list', 'multiple', 'isStoreEntrancePicShow', 'store_entrance_pic_list_media_id_list')">
						<van-icon class="add-icon" name="plus" />
					</view>
				</view>
			</view> -->

			<!-- 内部环境照片 -->
			<!-- <view class="create-item item-column">
				<text class="info-item-title">内部环境照片</text>
				<view class="detail-tally-imgs">
					<view class="grid-item-box" v-for="(item, index) in indoor_pic_list" :key="index"
						@tap.stop="ViewImage(indoor_pic_list, 'multiple', item)">
						<image :src="urlPrefix + item" class="tally-img" mode="aspectFill" />
						<van-icon class="delete-icon" name="clear"
							@tap.stop="DelImg('indoor_pic_list', 'isIndoorPicShow', 'multiple', index, 'indoor_pic_list_media_id_list')" />
					</view>
					<view v-if="isIndoorPicShow" class="grid-item-box detail-tally-img-add"
						@tap.stop="ChooseImage('indoor_pic_list', 'multiple', 'isIndoorPicShow', 'indoor_pic_list_media_id_list')">
						<van-icon class="add-icon" name="plus" />
					</view>
				</view>
			</view> -->
		</view>


		<view class="form-title">对公银行账户</view>
		<view class="create-form">
			<!-- 开户名称 -->
			<view class="create-item">
				<text class="info-item-title">开户名称</text>
				<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
					placeholder="请填写开户名称" v-model="account_name">
			</view>

			<!-- 开户银行 -->
			<view class="create-item">
				<view class="info-item-title">
					<text>开户银行</text>
					<van-icon class="explain-icon" name="question-o" />
				</view>
				<input class="info-item-input" type="text" @click="accountBankPopShow = true"
					placeholder-class="placeholderFontClass" disabled readonly placeholder="请选择开户银行"
					v-model="account_bank">
				<uni-icons class="right-arrow-icon" type="forward" size="14" color="#999"></uni-icons>
			</view>

			<!-- 开户银行省市编码 -->
			<view class="create-item">
				<text class="info-item-title">开户银行省市编码</text>
				<input class="info-item-input" type="text" placeholder-class="placeholderFontClass"
					placeholder="精确到市,例如:430100" v-model="bank_address_code">
			</view>

			<!-- 银行账号 -->
			<view class="create-item">
				<text class="info-item-title">银行账号</text>
				<input class="info-item-input" type="number" placeholder-class="placeholderFontClass"
					placeholder="请填写银行账号" v-model="account_number">
			</view>
		</view>


		<button class="create-btn" @click.stop.prevent="handleCreate">提交申请</button>

		<view class="height"></view>

		<!-- 超级管理员类型popup -->
		<van-popup :show="adminTypePopShow" position="bottom">
			<van-picker show-toolbar :columns="adminTypeList" @confirm="onAdminTypeConfirm"
				@cancel="adminTypePopShow = false" />
		</van-popup>

		<!-- 超级管理员证件类型popup -->
		<van-popup :show="adminIDcardPopShow" position="bottom">
			<van-picker show-toolbar :columns="adminIDcardList" @confirm="onAdminIDcardConfirm"
				@cancel="adminIDcardPopShow = false" />
		</van-popup>

		<!-- 是否是金融机构popup -->
		<van-popup :show="financeInstitutionPopShow" position="bottom">
			<van-picker show-toolbar :columns="isOrNotList" @confirm="onFinanceInstitutionConfirm"
				@cancel="financeInstitutionPopShow = false" />
		</van-popup>

		<!-- 登记证书类型popup -->
		<van-popup :show="certTypePopShow" position="bottom">
			<van-picker show-toolbar :columns="certTypeList" @confirm="onCertTypeConfirm"
				@cancel="certTypePopShow = false" />
		</van-popup>

		<!-- 证件持有人类型popup -->
		<van-popup :show="idHolderTypePopShow" position="bottom">
			<van-picker show-toolbar :columns="idHolderTypeList" @confirm="onIdHolderTypeConfirm"
				@cancel="idHolderTypePopShow = false" />
		</van-popup>

		<!-- 经营者/法人证件类型popup -->
		<van-popup :show="idDocTypePopShow" position="bottom">
			<van-picker show-toolbar :columns="adminIDcardList" @confirm="onIdDocTypeConfirm"
				@cancel="idDocTypePopShow = false" />
		</van-popup>

		<!-- 法人是否为受益人popup -->
		<van-popup :show="ownerPopShow" position="bottom">
			<van-picker show-toolbar :columns="isOrNotList" @confirm="onOwnerConfirm" @cancel="ownerPopShow = false" />
		</van-popup>

		<!-- 最终受益人证件类型popup -->
		<van-popup :show="uboIdDocTypePopShow" position="bottom">
			<van-picker show-toolbar :columns="adminIDcardList" @confirm="onUboIdDocTypeConfirm"
				@cancel="uboIdDocTypePopShow = false" />
		</van-popup>

		<!-- 开户银行popup -->
		<van-popup :show="accountBankPopShow" position="bottom">
			<van-picker show-toolbar :columns="bankList" @confirm="onAccountBankConfirm"
				@cancel="accountBankPopShow = false" />
		</van-popup>
	</view>
</template>

<script>
	import apiRqs from '@/api/api-request.js';
	import getDateTime from '@/common/getDateTime.js';
	import {
		sha256
	} from 'js-sha256';
	export default {
		data() {
			return {
				urlPrefix: "",
				adminTypeSelected: "法人",
				adminTypePopShow: false,
				adminTypeList: ['法人'], // 还有'经办人'选项，目前只允许提交法人信息
				contact_name: "",
				adminIDcardPopShow: false,
				adminIDcardValueSelected: "",
				adminIDcardNameSelected: "",
				adminIDcardList: ['中国大陆居民 - 身份证', '其他国家或地区居民 - 护照', '中国香港居民 - 来往内地通行证', '中国澳门居民 - 来往内地通行证',
					'中国台湾居民 - 来往大陆通行证', '外国人居留证', '港澳居民证', '台湾居民证'
				],
				adminIDcardIdList: ['IDENTIFICATION_TYPE_IDCARD', 'IDENTIFICATION_TYPE_OVERSEA_PASSPORT',
					'IDENTIFICATION_TYPE_HONGKONG_PASSPORT', 'IDENTIFICATION_TYPE_MACAO_PASSPORT',
					'IDENTIFICATION_TYPE_TAIWAN_PASSPORT', 'IDENTIFICATION_TYPE_FOREIGN_RESIDENT',
					'IDENTIFICATION_TYPE_HONGKONG_MACAO_RESIDENT', 'IDENTIFICATION_TYPE_TAIWAN_RESIDENT'
				],
				contact_id_doc_copy: "",
				isIdCardFrontShow: true,
				isIdCardReverseShow: true,
				idCardStartDate: "",
				contact_period_begin_valid_date: "证件有效期开始时间",
				contact_period_begin: "",
				startDateLimit: "",
				endDateLimit: "",
				idCardEndDate: "",
				startDateLimit2: "",
				endDateLimit2: "",
				contact_period_end_valid_date: "证件有效期结束时间",
				contact_period_end: "",
				isBusinessAuthorizationLetterShow: true,
				business_authorization_letter: "",
				mobile_phone: "",
				contact_email: "",
				subjectTypeSelected: "",
				financeInstitutionPopShow: false,
				finance_institution: "否",
				// isOrNotList: ['是', '否'],
				isOrNotList: ['是'],
				isBusinessLicenseShow: true,
				license_number: "",
				merchant_name: "",
				legal_person: "",
				isCertCopyShow: true,
				cert_copy: "",
				certTypePopShow: false,
				cert_type: "",
				certTypeList: ['事业单位法人证书', '统一社会信用代码证书', '社会团体法人登记证书', '民办非企业单位登记证书', '基金会法人登记证书', '执业许可证/执业证',
					'基层群众性自治组织特别法人统一社会信用代码证', '农村集体经济组织登记证', '宗教活动场所登记证', '政府部门下发的其他有效证明文件'
				],
				certTypeIdList: ['CERTIFICATE_TYPE_2388', 'CERTIFICATE_TYPE_2389', 'CERTIFICATE_TYPE_2394',
					'CERTIFICATE_TYPE_2395', 'CERTIFICATE_TYPE_2396', 'CERTIFICATE_TYPE_2520', 'CERTIFICATE_TYPE_2521',
					'CERTIFICATE_TYPE_2522', 'CERTIFICATE_TYPE_2399', 'CERTIFICATE_TYPE_2400'
				],
				cert_number: "",
				anohter_merchant_name: "",
				company_address: "",
				another_legal_person: "",
				period_begin_date: "",
				periodStartValidDate: "有效期限开始日期",
				period_end_date: "",
				periodEndValidDate: "有效期限结束日期",
				isCertificateLetterShow: true,
				finance_type: "",
				isFinanceLicenseShow: true,
				finance_license_pics: "",
				idHolderTypePopShow: false,
				id_holder_type: "",
				idHolderTypeList: ['法人', '经办人'],
				idDocTypePopShow: false,
				id_doc_type: "",
				isAuthorizeLetterShow: true,
				authorize_letter_copy: "",
				uboIdDocTypePopShow: false,
				ubo_id_doc_type: "",
				isUboIdDocShow: true,
				ubo_id_doc_copy: "",
				isUboIdDocCopyBackShow: true,
				ubo_id_doc_copy_back: "",
				ubo_id_doc_name: "",
				ubo_id_doc_number: "",
				ubo_id_doc_address: "",
				ubo_period_begin: "",
				uboPeriodBeginValidDate: "证件有效期开始时间",
				ubo_period_end: "",
				uboPeriodEndValidDate: "证件有效期结束时间",
				isIdCardCopyShow: true,
				id_card_copy: "",
				isIdCardNationalShow: true,
				id_card_national: "",
				id_card_name: "",
				id_card_number: "",
				id_card_address: "",
				cardPeriodBeginValidDate: "身份证有效期开始时间",
				card_period_begin: "",
				cardPeriodEndValidDate: "身份证有效期结束时间",
				card_period_end: "",
				isOtherIdDocCopyShow: true,
				other_id_doc_copy: "",
				isOtherIdDocCopyBackShow: true,
				other_id_doc_copy_back: "",
				other_id_doc_name: "",
				other_id_doc_number: "",
				other_id_doc_address: "",
				ownerPopShow: false,
				owner: "是",
				merchant_shortname: "",
				service_phone: "",
				biz_store_name: "",
				biz_address_code: "",
				biz_store_address: "",
				isStoreEntrancePicShow: true,
				storeEntrancePic: "",
				isIndoorPicShow: true,
				indoor_pic: "",
				account_name: "",
				accountBankPopShow: false,
				account_bank: "",
				bankList: ['工商银行', '交通银行', '招商银行', '民生银行', '中信银行', '浦发银行', '兴业银行', '光大银行', '广发银行', '平安银行', '北京银行', '华夏银行',
					'农业银行', '建设银行', '邮政储蓄银行', '中国银行', '宁波银行'
				],
				bank_address_code: "",
				account_number: "",
				contact_id_number: "",
				contact_id_doc_copy_back: "",
				businessLicense: "",
				ubo_info_list: [],
				cur_ubo_id_doc_type_pop_index: -1,
				store_entrance_pic_list: [],
				indoor_pic_list: [],
				other_doc_period_begin: "", // 其它类型证件有效开始时间
				other_doc_period_end: "", // 其它类型证件有效结束时间
				businessLicenseMediaId: "", // 营业执照media id
				contact_id_doc_copy_media_id: "", // 经办人证件正面照片media id
				contact_id_doc_copy_back_media_id: "", // 经办人证件反面照片media id
				business_authorization_letter_media_id: "", // 业务办理授权函media id
				id_card_copy_media_id: "", // 法人身份证正面照片media id
				id_card_national_media_id: "", // 法人身份证反面照片media id
				store_entrance_pic_list_media_id_list: [], // 门头照片media list
				indoor_pic_list_media_id_list: [], // 内部环境media list
				license_address: "", // 营业执照注册地址
				period_begin: "", // 营业执照有效期限开始日期
				period_begin_valid_date: "营业执照有效期开始时间",
				period_end: "", // 营业执照有效期限结束日期
				period_end_valid_date: "营业执照有效期结束时间",
				isMiniProgramPicsShow: true, // 小程序截图是否显示已选图
				mini_program_pic: "", // 小程序截图呈现路径
				mini_program_pic_media_id: "", // 小程序截图media id
			}
		},
		onLoad() {
			this.urlPrefix = getApp().globalData.websiteUrl;
		},
		methods: {
			// 超级管理员类型 确定
			onAdminTypeConfirm(e) {
				let value = e.detail.value;
				this.adminTypeSelected = value;
				this.adminTypePopShow = false;
			},
			// 超级管理员证件类型 确定
			onAdminIDcardConfirm(e) {
				let index = e.detail.index;
				let value = e.detail.value;
				this.adminIDcardNameSelected = value;
				this.adminIDcardValueSelected = this.adminIDcardIdList[index];
				this.adminIDcardPopShow = false;
			},
			// 有效开始时间
			bindStartDateChange(e) {
				const value = e.detail.value;
				this.startValidDate = value;
				this.failureStartDateLimit = value;
			},
			// 有效结束时间
			bindEndDateChange(e) {
				const value = e.detail.value;
				this.endValidDate = value;
				this.endDateLimit = value;
			},
			// 经办人身份证有效期开始时间
			bindContactPeriodBeginChange(e) {
				const value = e.detail.value;
				this.contact_period_begin = value;
			},
			// 经办人身份证有效期结束时间
			bindContactPeriodEndChange(e) {
				const value = e.detail.value;
				this.contact_period_end = value;
			},
			// 法人身份证有效期开始时间
			bindCardPeriodBeginChange(e) {
				const value = e.detail.value;
				this.card_period_begin = value;
			},
			// 法人身份证有效期结束时间
			bindCardPeriodEndChange(e) {
				const value = e.detail.value;
				this.card_period_end = value;
			},
			// 营业执照有效期开始时间
			bindPeriodBeginChange(e) {
				const value = e.detail.value;
				this.period_begin = value;
			},
			// 营业执照有效期结束时间
			bindPeriodEndChange(e) {
				const value = e.detail.value;
				this.period_end = value;
			},
			// 登记证书类型 确定
			onCertTypeConfirm() {},
			// 证件持有人类型 确定
			onIdHolderTypeConfirm() {},
			// 经营者/法人证件类型 确定
			onIdDocTypeConfirm() {},
			// 法人是否为受益人 确定
			onOwnerConfirm(e) {
				let value = e.detail.value;
				this.owner = value;
				this.ownerPopShow = false;
			},
			// 最终受益人证件类型 确定
			onUboIdDocTypeConfirm(e) {
				let value = e.detail.value;
				// 拿到目前受益人下标
				let cur_index = this.cur_ubo_id_doc_type_pop_index;
				// 赋值
				this.ubo_info_list[cur_index].ubo_id_doc_type = value;
			},
			// 开户银行 确定
			onAccountBankConfirm(e) {
				let value = e.detail.value;
				this.account_bank = value;
				this.accountBankPopShow = false;
			},
			// 上传图片
			ChooseImage(type, uploadType, imgShow, mediaId) {
				let cur_date = getDateTime.dateTimeStr("ymdhis");
				let loginInfo = uni.getStorageSync("loginInfo");
				let that = this;
				if (uploadType == 'single') {
					uni.chooseImage({
						count: 1, // 上传图片数量
						sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
						sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
						success: (res) => {
							if (res.errMsg == 'chooseImage:ok' && (res.tempFiles[0].size / 1024 > 5120)) {
								getApp().showToast('图片大小不能超过5M，请重新上传!');
								return false;
							}
							getApp().showLoading();
							const tempFilePaths = res.tempFilePaths;
							console.log('上传单张图片res', res);

							// 上传完图片隐藏添加图片按钮
							that[imgShow] = false;
							console.log('that[imgShow]', that[imgShow]);

							// 1.上传图片至服务器
							let p1 = new Promise((resolve) => {
								uni.uploadFile({
									url: getApp().globalData.websiteUrl + "/api/v1/FileUpload",
									filePath: tempFilePaths[0],
									name: 'file',
									header: {
										'Authorization': ('Bearer ' + loginInfo.token) || ''
									},
									formData: {
										'fileType': 'WeiXinPay'
									},
									success: (uploadFileRes) => {
										let res = JSON.parse(uploadFileRes.data);
										let filePath = res.data[0].filePath;
										let newFilePath = filePath.replace(/\\/g, "/");
										let completePath = newFilePath + "/" + res.data[0]
											.fileName;
										console.log('上传单张图片结果', res, completePath);
										that[type] = completePath;
										console.log('that[type] ====', that[type]);
										resolve(completePath);
									}
								});
							})

							p1.then(path => {
								// 2.图片sha256加密
								apiRqs._imgSha256({
									"filePath": path
								}).then(response => {
									console.log('商户头像地址sha256加密', response);
									const imgSha256 = response.data;
									let p = {
										"file": path,
										"meta": {
											"filename": type + cur_date + ".png",
											"sha256": imgSha256
										}
									};
									console.log('Sha256', p);
									// 3.上传图片至微信支付端口 得到mediaID
									apiRqs._imgMediaId(p).then(result => {
										uni.hideLoading();
										console.log('上传微信支付端口media id===', result);
										if (result.code == 200 && result.data
											.resultCode.stateCode == "200") {
											that[mediaId] = result.data.media_id;
										}
									})
								})


								// apiRqs._imgUrlToBinary(path).then(result => {
								// 	console.log('图片转二进制结果', result);
								// 	if (result.code == 200) {
								// 		let p = {
								// 			"file": result.data,
								// 			"meta": {
								// 				"filename": type + cur_date + ".png",
								// 				"sha256": sha256(result.data)
								// 			}
								// 		};

								// 		// 3.上传图片至微信支付端口 得到mediaID 
								// 		apiRqs._uploadCouponImg(p).then(result => {
								// 			uni.hideLoading();
								// 			console.log('图片上传结果', result);
								// 		})
								// 	} else {
								// 		uni.hideLoading();
								// 		getApp().showToast(result.msg);
								// 	}

								// })
							})
						}
					});
				} else {
					// 上传多张图片
					uni.chooseImage({
						count: 6, // 上传图片数量
						sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
						sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
						success: (res) => {
							console.log('上传多张图片res', res);
							if (res.errMsg == 'chooseImage:ok' && (res.tempFiles[0].size / 1024 > 5120)) {
								getApp().showToast('图片大小不能超过5M，请重新上传!');
								return false;
							}
							getApp().showLoading();
							const tempFilePaths = res.tempFilePaths;
							// 上传完图片隐藏添加图片按钮
							if ((that[type].length + tempFilePaths.length) < 9) {
								that[imgShow] = true;
							} else if ((that[type].length + tempFilePaths.length) >= 9) {
								that[imgShow] = false;
							}

							let imgs = [];
							let mediaIdArr = [];
							for (let i = 0; i < tempFilePaths.length; i++) {
								// 1.上传图片至服务器
								uni.uploadFile({
									url: getApp().globalData.websiteUrl + "/api/v1/FileUpload",
									filePath: tempFilePaths[0],
									name: 'file',
									header: {
										'Authorization': ('Bearer ' + loginInfo.token) || ''
									},
									formData: {
										'fileType': 'WeiXinPay'
									},
									success: (uploadFileRes) => {
										let res = JSON.parse(uploadFileRes.data);
										let filePath = res.data[0].filePath;
										let newFilePath = filePath.replace(/\\/g, "/");
										let completePath = newFilePath + "/" + res.data[0]
											.fileName;
										console.log('上传单张图片结果', res, completePath);
										imgs.push(completePath);
										console.log('that[type] ====', that[type]);
										// 2.图片sha256加密
										apiRqs._imgSha256({
											"filePath": completePath
										}).then(response => {
											console.log('商户头像地址sha256加密', response);
											const imgSha256 = response.data;
											let p = {
												"file": completePath,
												"meta": {
													"filename": type + cur_date +
														".png",
													"sha256": imgSha256
												}
											};
											console.log('Sha256', p);
											// 3.上传图片至微信支付端口 得到mediaID
											apiRqs._imgMediaId(p).then(result => {
												uni.hideLoading();
												console.log('上传微信支付端口media id===',
													result);
												if (result.code == 200 && result
													.data.resultCode.stateCode ==
													"200") {
													mediaIdArr.push(result.data
														.media_id);
												}

											})
										})
									}
								});
							}
							that[type] = imgs;
							that[mediaId] = mediaIdArr;
							console.log('that[mediaId] ====', mediaIdArr);
						}
					});
				}
			},
			// 预览图片
			ViewImage(imgSrc, uploadType, cur_img) {
				console.log('点击了预览');
				if (uploadType == 'single') {
					let imgArr = [imgSrc];
					uni.previewImage({
						urls: imgArr,
						current: imgSrc
					});
				} else {
					uni.previewImage({
						urls: imgSrc,
						current: cur_img
					});
				}

			},
			// 删除图片
			DelImg(imgLabel, imgShow, uploadType, cur_imgIndex, mediaList) {
				if (uploadType == 'single') {
					this[imgLabel] = "";
					this[imgShow] = true;
					this[cur_imgIndex] = "";
					console.log(cur_imgIndex, this[cur_imgIndex]);
				} else {
					this[imgLabel].splice(cur_imgIndex, 1);
					this[mediaList].splice(cur_imgIndex, 1);
					if (this[imgLabel].length < 9) {
						this[imgShow] = true;
					} else if (this[imgLabel].length >= 9) {
						this[imgShow] = false;
					}
				}
			},
			// 添加受益人
			addUboInfo() {
				this.ubo_info_list.push({
					"ubo_id_doc_type": "",
					"ubo_id_doc_copy": "",
					"ubo_id_doc_copy_src": "",
					"ubo_id_doc_copy_back": "",
					"ubo_id_doc_copy_back_src": "",
					"ubo_id_doc_name": "",
					"ubo_id_doc_number": "",
					"ubo_id_doc_address": "",
					"ubo_period_begin": "",
					"ubo_period_end": "",
					"isUboIdDocShow": true,
					"isUboIdDocCopyBackShow": true,
					"ubo_id_doc_copy_src_media_id": "",
					"ubo_id_doc_copy_back_src_media_id": ""
				})
			},
			// 删除受益人
			deleteUboInfo(index) {
				this.ubo_info_list.splice(index, 1);
			},
			// 受益人上传图片
			uboChooseImage(index, src, mediaId) {
				let cur_date = getDateTime.dateTimeStr("ymdhis");
				let loginInfo = uni.getStorageSync("loginInfo");
				let that = this;
				uni.chooseImage({
					count: 1, // 上传图片数量
					sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
					success: (res) => {
						if (res.errMsg == 'chooseImage:ok' && (res.tempFiles[0].size / 1024 > 5120)) {
							getApp().showToast('图片大小不能超过5M，请重新上传!');
							return false;
						}
						getApp().showLoading();
						const tempFilePaths = res.tempFilePaths;
						console.log('上传单张图片res', res);

						// 上传完图片隐藏添加图片按钮
						that.ubo_info_list[index].isUboIdDocShow = false;

						// 1.上传图片至服务器
						let p1 = new Promise((resolve) => {
							uni.uploadFile({
								url: getApp().globalData.websiteUrl + "/api/v1/FileUpload",
								filePath: tempFilePaths[0],
								name: 'file',
								header: {
									'Authorization': ('Bearer ' + loginInfo.token) || ''
								},
								formData: {
									'fileType': 'WeiXinPay'
								},
								success: (uploadFileRes) => {
									let res = JSON.parse(uploadFileRes.data);
									let filePath = res.data[0].filePath;
									let newFilePath = filePath.replace(/\\/g, "/");
									let completePath = newFilePath + "/" + res.data[0]
										.fileName;
									console.log('上传单张图片结果', res, completePath);
									that.ubo_info_list[index].ubo_id_doc_copy_src =
										completePath;
									console.log('that[type] ====', that[type]);
									resolve(completePath);
								}
							});
						})

						p1.then(path => {
							// 2.图片sha256加密
							apiRqs._imgSha256({
								"filePath": path
							}).then(response => {
								console.log('商户头像地址sha256加密', response);
								const imgSha256 = response.data;
								let p = {
									"file": path,
									"meta": {
										"filename": type + cur_date + ".png",
										"sha256": imgSha256
									}
								};
								console.log('Sha256', p);
								// 3.上传图片至微信支付端口 得到mediaID
								apiRqs._imgMediaId(p).then(result => {
									uni.hideLoading();
									console.log('上传微信支付端口media id===', result);
									if (result.code == 200 && result.data.resultCode
										.stateCode == "200") {
										that.ubo_info_list[index][mediaId] = result
											.data.media_id;
									}
								})
							})
						})
					}
				});
			},
			// 受益人预览图片
			uboViewImage(index, imgLabel) {
				let imgSrc = this.ubo_info_list[index][imgLabel];
				let imgArr = [imgSrc];
				uni.previewImage({
					urls: imgArr,
					current: imgSrc
				});
			},
			// 受益人删除图片
			uboDelImg(index, imgLabel, imgShow, mediaId) {
				this.ubo_info_list[index][imgLabel] = "";
				this.ubo_info_list[index][imgShow] = true;
				this.ubo_info_list[index][mediaId] = "";
			},
			// 打开受益人证件类型选择框
			openUboIdDocTypePopShow(index) {
				this.uboIdDocTypePopShow = true;
				this.cur_ubo_id_doc_type_pop_index = index;
			},
			// 受益人证件有效开始时间
			bindUboPeriodBeginDateChange(e, index) {
				const value = e.detail.value;
				this.ubo_info_list[index].ubo_period_begin = value;
				this.uboPeriodBeginValidDate = value;
			},
			// 受益人证件有效结束时间
			bindUboPeriodEndDateChange(e, index) {
				const value = e.detail.value;
				this.ubo_info_list[index].ubo_period_end = value;
				this.uboPeriodEndValidDate = value;
			},
			// 提交入驻行距申请
			handleCreate() {
				let tokenInfo = uni.getStorageSync("tokenInfo");
				let cur_date = getDateTime.dateTimeStr("ymdhis");
				let {
					adminTypeSelected,
					contact_name,
					mobile_phone,
					contact_email,
					adminIDcardNameSelected,
					adminIDcardValueSelected,
					contact_id_number,
					contact_id_doc_copy,
					contact_id_doc_copy_back,
					contact_period_begin,
					contact_period_end,
					business_authorization_letter,
					businessLicense,
					businessLicenseMediaId,
					license_number,
					license_address,
					merchant_name,
					legal_person,
					id_card_copy,
					id_card_national,
					id_card_name,
					id_card_number,
					id_card_address,
					card_period_begin,
					card_period_end,
					owner,
					ubo_info_list,
					merchant_shortname,
					service_phone,
					biz_store_name,
					biz_address_code,
					biz_store_address,
					store_entrance_pic_list,
					indoor_pic_list,
					account_name,
					account_bank,
					bank_address_code,
					account_number,
					period_begin,
					period_end,
					id_card_copy_media_id,
					id_card_national_media_id,
					mini_program_pic_media_id,
				} = this;
				let rqsData = {
					// 业务申请编号
					// 1、只能由数字、字母或下划线组成，建议前缀为服务商商户号；
					// 2、服务商自定义的唯一编号；
					// 3、每个编号对应一个申请单，每个申请单审核通过后会生成一个微信支付商户号。
					// 示例值：1900013511_10000
					"business_code": "1655918740_" + tokenInfo.shopId,

					// 超级管理员信息
					// 超级管理员需在开户后进行签约，并可接收日常重要管理信息和进行资金操作，请确定其为商户法定代表人或负责人
					"contact_info": {
						"contact_type": "", // 超级管理员类型 LEGAL：经营者/法人 SUPER：经办人 当前默认只可选择LEGAL法人
						"contact_name": "", // 超级管理员姓名 该字段需进行加密处理
						"mobile_phone": "", // 联系手机 用于接收微信支付的重要管理信息及日常操作验证码 该字段需进行加密处理
						"contact_email": "" // 联系邮箱 用于接收微信支付的开户邮件及日常业务通知 该字段需进行加密处理
					},

					// 主体资料
					// 请填写商家的营业执照/登记证书、经营者/法人的证件等信息
					"subject_info": {
						"subject_type": "SUBJECT_TYPE_ENTERPRISE", // 主体类型 SUBJECT_TYPE_ENTERPRISE（企业）：营业执照上的主体类型一般为有限公司、有限责任公司

						// 营业执照
						"business_license_info": {
							"license_copy": "", // 营业执照照片 上传图片生成好的MediaID
							"license_number": "", // 注册号/统一社会信用代码 主体为“企业”时，请填写营业执照上的注册号/统一社会信用代码
							"merchant_name": "", // 商户名称 不能仅含数字、特殊字符 示例值：腾讯科技有限公司
							"legal_person": "", // 法人姓名 
							"license_address": "", // 注册地址 填写营业执照的注册地址 示例值：广东省深圳市南山区xx路xx号
							"period_begin": "", // 有效期限开始日期 营业执照的有效期限开始时间
							"period_end": "", // 有效期限结束日期 营业执照的有效期限结束时间
						},

						// 法人身份证件 企业/社会组织：请上传法人的身份证件
						"identity_info": {
							"id_doc_type": "IDENTIFICATION_TYPE_IDCARD", // 证件持有人类型 当证件持有人类型为法人时，填写 默认IDENTIFICATION_TYPE_IDCARD：中国大陆居民-身份证

							// 身份证信息
							// 当证件持有人类型为经营者/法人且证件类型为“身份证”时填写
							"id_card_info": {
								"id_card_copy": "", // 身份证人像面照片 上传图片生成好的MediaID
								"id_card_national": "", // 身份证国徽面照片 上传图片生成好的MediaID
								"id_card_name": "", // 身份证姓名 法定代表人对应身份证的姓名 该字段需进行加密处理
								"id_card_number": "", // 身份证号码 法定代表人对应身份证的号码 该字段需进行加密处理
								"id_card_address": "", // 身份证居住地址 主体类型为企业时，需要填写 该字段需进行加密处理
								"card_period_begin": "", // 身份证有效期开始时间
								"card_period_end": "" // 身份证有效期结束时间
							},
							"owner": owner == '是' ? true : false // 法人是否为受益人 主体类型为企业时，需要填写
						}
					},

					// 经营资料
					// 填写商家的经营业务信息、售卖商品/提供服务场景信息
					"business_info": {
						"merchant_shortname": "", // 商户简称 在支付完成页向买家展示，需与微信经营类目相关 示例值：张三餐饮店
						"service_phone": "", // 客服电话 将在交易记录中向买家展示，请确保电话畅通以便平台回拨确认 

						// 经营场景
						"sales_info": {
							"sales_scenes_type": ["SALES_SCENES_MINI_PROGRAM"], // 经营场景类型 SALES_SCENES_MINI_PROGRAM：小程序

							// 小程序场景 审核通过后，服务商可帮商家发起JSAPI支付 
							"mini_program_info": {
								"mini_program_appid": "wxadc26d832d9c62d2", // 服务商小程序APPID 

								// 小程序截图 提供服务的页面截图/设计稿 上传图片生成好的MediaID
								"mini_program_pics": [
									"V1_jKrw2W9Gueq6tNlXfkzfcR4bC4TeHmPb7_iDMmIk2VOmxBrFIfp7IaGXwhZaFvkxK68xcmlto8qLqwT0Ns4g6ALJOzY9eQhmv6giwKWUAjk"
								],
							}
						}
					},

					// 结算规则 
					// 填写商家的结算费率规则、特殊资质等信息
					"settlement_info": {
						"settlement_id": "711", // 入驻结算规则ID 结算ID：711，行业ID：28，无需特殊资质
						"qualification_type": "门户论坛/网络广告及推广/软件开发/其他互联网服务" // 所属行业 指定行业名称
					},

					// 结算银行账户 填写商家提现收款的银行账户信息
					"bank_account_info": {
						"bank_account_type": "BANK_ACCOUNT_TYPE_CORPORATE", // 账户类型 若主体为企业，可填写：对公银行账户，BANK_ACCOUNT_TYPE_CORPORATE：对公银行账户
						"account_name": "", // 开户名称 选择“对公银行账户”时，开户名称必须与营业执照上的“商户名称”一致，该字段需进行加密处理
						"account_bank": "", // 开户银行 17家直连银行，请根据开户银行对照表直接填写银行名
						"bank_address_code": "", // 开户银行省市编码 至少精确到市
						"account_number": "" // 银行账号 该字段需进行加密处理
					}
				};
				// 超级管理员类型值判断
				if (adminTypeSelected == "") {
					getApp().showToast("请选择超级管理员类型");
					return false;
				} else if (adminTypeSelected == '法人') {
					// 当超级管理员类型为【法人】时
					rqsData.contact_info.contact_type = 'LEGAL';
				} else {
					// 为【经办人】时
					rqsData.contact_info.contact_type = 'SUPER';
					// 经办人证件类型值判断
					if (adminIDcardNameSelected == "") {
						getApp().showToast("请选择经办人证件类型");
						return false;
					} else {
						rqsData.contact_info.contact_id_doc_type = adminIDcardValueSelected;
					}
					// 经办人身份证件号码值判断
					if (contact_id_number == "") {
						getApp().showToast("请填写经办人身份证号码");
						return false;
					} else {
						rqsData.contact_info.contact_id_number = contact_id_number;
					}
					// 经办人证件正面照片值判断
					if (contact_id_doc_copy == "") {
						getApp().showToast("请上传经办人证件正面照片");
						return false;
					} else {
						rqsData.contact_info.contact_id_doc_copy = contact_id_doc_copy;
					}
					// 经办人证件反面照片值判断
					if (contact_id_doc_copy_back == "") {
						getApp().showToast("请上传经办人证件反面照片");
						return false;
					} else {
						rqsData.contact_info.contact_id_doc_copy_back = contact_id_doc_copy_back;
					}
					// 经办人证件有效期开始时间判断
					if (contact_period_begin == "") {
						getApp().showToast("请选择证件有效期开始时间");
						return false;
					} else {
						rqsData.contact_info.contact_period_begin = contact_period_begin;
					}

					// 经办人证件有效期结束时间判断
					if (contact_period_end == "") {
						getApp().showToast("请选择证件有效期结束时间");
						return false;
					} else {
						rqsData.contact_info.contact_period_end = contact_period_end;
					}

					// 业务办理授权函判断
					if (business_authorization_letter == "") {
						getApp().showToast("请上传业务办理授权函");
						return false;
					} else {
						rqsData.contact_info.business_authorization_letter = business_authorization_letter;
					}
				}
				// 超级管理员姓名值判断
				if (contact_name.trim() == "") {
					getApp().showToast("请填写超级管理员姓名");
					return false;
				} else {
					rqsData.contact_info.contact_name = contact_name;
				}
				// 联系手机值判断
				if (mobile_phone.trim() == "") {
					getApp().showToast("请填写联系手机");
					return false;
				} else if (!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/).test(mobile_phone)) {
					getApp().showToast("联系手机格式错误");
					return false;
				} else {
					rqsData.contact_info.mobile_phone = mobile_phone;
				}
				// 联系邮箱值判断
				if (contact_email.trim() == "") {
					getApp().showToast("请填写联系邮箱");
					return false;
				} else if (!(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/).test(contact_email)) {
					getApp().showToast("联系邮箱格式错误");
					return false;
				} else {
					rqsData.contact_info.contact_email = contact_email;
				}
				// 营业执照照片
				if (businessLicenseMediaId == "") {
					getApp().showToast("请上传营业执照照片");
					return false;
				} else {
					rqsData.subject_info.business_license_info.license_copy = businessLicenseMediaId;
				}
				// 营业执照社会代码判断
				if (license_number.trim() == "") {
					getApp().showToast("请填写统一社会信用代码");
					return false;
				} else if (license_number.length != 18) {
					getApp().showToast("统一社会信用代码格式不正确，请重新填写");
					return false;
				} else {
					rqsData.subject_info.business_license_info.license_number = license_number;
				}
				// 商户名称判断
				if (merchant_name.trim() == "") {
					getApp().showToast("请填写商户名称");
					return false;
				} else {
					rqsData.subject_info.business_license_info.merchant_name = merchant_name;
				}
				// 法人姓名判断
				if (legal_person.trim() == "") {
					getApp().showToast("请填写法人姓名");
					return false;
				} else {
					rqsData.subject_info.business_license_info.legal_person = legal_person;
				}
				// 注册地址判断
				if (license_address.trim() == "") {
					getApp().showToast("请填写营业执照注册地址");
					return false;
				} else {
					rqsData.subject_info.business_license_info.license_address = license_address;
				}
				// 营业执照有效期限开始日期
				if (period_begin == "") {
					getApp().showToast("请填写营业执照有效期限开始日期");
					return false;
				} else {
					rqsData.subject_info.business_license_info.period_begin = period_begin;
				}
				// 营业执照有效期限结束日期
				if (period_end == "") {
					getApp().showToast("请填写营业执照有效期限结束日期");
					return false;
				} else {
					rqsData.subject_info.business_license_info.period_end = period_end;
				}
				// 法人身份证人像面照片
				if (id_card_copy_media_id == "") {
					getApp().showToast("请上传法人身份证人像面照片");
					return false;
				} else {
					rqsData.subject_info.identity_info.id_card_info.id_card_copy = id_card_copy_media_id;
				}
				// 法人身份证国徽面照片
				if (id_card_national_media_id == "") {
					getApp().showToast("请上传法人身份证国徽面照片");
					return false;
				} else {
					rqsData.subject_info.identity_info.id_card_info.id_card_national = id_card_national_media_id;
				}
				// 法人身份证姓名
				if (id_card_name.trim() == "") {
					getApp().showToast("请填写法人身份证姓名");
					return false;
				} else {
					rqsData.subject_info.identity_info.id_card_info.id_card_name = id_card_name;
				}
				// 身份证号码
				if (id_card_number.trim() == "") {
					getApp().showToast("请填写法人身份证号码");
					return false;
				} else {
					rqsData.subject_info.identity_info.id_card_info.id_card_number = id_card_number;
				}
				// 身份证居住地址
				if (id_card_address.trim() == "") {
					getApp().showToast("请填写法人身份证居住地址");
					return false;
				} else {
					rqsData.subject_info.identity_info.id_card_info.id_card_address = id_card_address;
				}
				// 身份证有效期开始时间
				if (card_period_begin == "") {
					getApp().showToast("请填写法人身份证有效期开始时间");
					return false;
				} else {
					rqsData.subject_info.identity_info.id_card_info.card_period_begin = card_period_begin;
				}
				// 身份证有效期结束时间
				if (card_period_end == "") {
					getApp().showToast("请填写法人身份证有效期结束时间");
					return false;
				} else {
					rqsData.subject_info.identity_info.id_card_info.card_period_end = card_period_end;
				}
				// 最终受益人信息列表
				if (ubo_info_list.length > 0) {
					// rqsData.subject_info.ubo_info_list
					let arr = [];
					for (let i = 0; i < ubo_info_list.length; i++) {
						if (ubo_info_list[i].ubo_id_doc_copy_src_media_id == "") {
							getApp().showToast(`请上传受益人${i + 1}的身份证正面照片`);
							return false;
						} else if (ubo_info_list[i].ubo_id_doc_copy_back_src_media_id == "") {
							getApp().showToast(`请上传受益人${i + 1}的身份证反面照片`);
							return false;
						} else if (ubo_info_list[i].ubo_id_doc_name == "") {
							getApp().showToast(`请填写受益人${i + 1}的证件姓名`);
							return false;
						} else if (ubo_info_list[i].ubo_id_doc_number == "") {
							getApp().showToast(`请填写受益人${i + 1}的证件号码`);
							return false;
						} else if (ubo_info_list[i].ubo_id_doc_address == "") {
							getApp().showToast(`请填写受益人${i + 1}的证件居住地址`);
							return false;
						} else if (ubo_info_list[i].ubo_period_begin == "") {
							getApp().showToast(`请填写受益人${i + 1}的证件有效期开始时间`);
							return false;
						} else if (ubo_info_list[i].ubo_period_end == "") {
							getApp().showToast(`请填写受益人${i + 1}的证件有效期结束时间`);
							return false;
						}
						arr.push({
							"ubo_id_doc_type": "IDENTIFICATION_TYPE_IDCARD",
							"ubo_id_doc_copy": ubo_info_list[i].ubo_id_doc_copy_src_media_id,
							"ubo_id_doc_copy_back": ubo_info_list[i].ubo_id_doc_copy_back_src_media_id,
							"ubo_id_doc_name": ubo_info_list[i].ubo_id_doc_name,
							"ubo_id_doc_number": ubo_info_list[i].ubo_id_doc_number,
							"ubo_id_doc_address": ubo_info_list[i].ubo_id_doc_address,
							"ubo_period_begin": ubo_info_list[i].ubo_period_begin,
							"ubo_period_end": ubo_info_list[i].ubo_period_end
						})
					}
				}
				// 商户简称
				if (merchant_shortname.trim() == "") {
					getApp().showToast("请填写商户简称");
					return false;
				} else {
					rqsData.business_info.merchant_shortname = merchant_shortname;
				}
				// 客服电话判断
				if (service_phone == "") {
					getApp().showToast("请填写客服电话");
					return false;
				} else if (!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/).test(service_phone)) {
					getApp().showToast("客服电话格式错误");
					return false;
				} else {
					rqsData.business_info.service_phone = service_phone;
				}
				// 小程序截图
				// if (mini_program_pic_media_id == "") {
				// 	getApp().showToast("请上传小程序截图");
				// 	return false;
				// } else {
				// 	rqsData.business_info.sales_info.mini_program_info.mini_program_pics = [mini_program_pic_media_id];
				// }
				// 开户名称
				if (account_name.trim() == "") {
					getApp().showToast("请填写银行开户名称");
					return false;
				} else {
					rqsData.bank_account_info.account_name = account_name;
				}
				// 开户银行
				if (account_bank == "") {
					getApp().showToast("请选择开户银行");
					return false;
				} else {
					rqsData.bank_account_info.account_bank = account_bank;
				}
				// 开户银行省市编码
				if (bank_address_code.trim() == "") {
					getApp().showToast("请填写开户银行省市编码");
					return false;
				} else {
					rqsData.bank_account_info.bank_address_code = bank_address_code;
				}
				// 银行账号
				if (account_number.trim() == "") {
					getApp().showToast("请填写银行账号");
					return false;
				} else {
					rqsData.bank_account_info.account_number = account_number;
				}
				console.log('提交数据json', JSON.stringify(rqsData));
				console.log('提交数据', rqsData);
				getApp().showLoading();
				apiRqs._submitApplyment(tokenInfo.shopId, rqsData).then(res => {
					uni.hideLoading();
					console.log('提交申请结果', res);
					if (res.code == 200 && res.data.resultCode.stateCode == "200") {
						getApp().showToast("提交成功，审核时间为3-7个工作日，请耐心等待");
						setTimeout(() => {
							uni.navigateBack();
						}, 2000)
					} else if (res.code != 200) {
						getApp().showToast(res.msg);
					} else if (res.code == 200 && res.data.resultCode.stateCode != "200") {
						getApp().showToast(res.data.resultCode.errorMessage);
					} else {
						getApp().showToast("提交失败");
					}
				})
			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f1f1f1;
	}

	.settled-merchant {
		.form-title {
			margin: 20px 20px 0 20px;
			font-size: 14px;
			color: rgba(0, 0, 0, 0.5);
			display: flex;
			align-items: center;

			&::before {
				display: inline-block;
				content: "*";
				margin-right: 3px;
				color: red;
			}
		}

		.ubo-item-title {
			margin: 10px 20px 0px 20px;
			font-size: 13px;
			color: rgba(0, 0, 0, 1);
			display: flex;
			align-items: center;
			justify-content: space-between;

			.delete-text-btn {
				color: #FF1010;
			}
		}

		.add-ubo-text-btn {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 13px;
			color: #FFA53D;

			.add-icon {
				font-size: 14px;
				margin-right: 5px;
			}

		}

		.create-form {
			margin: 10px 20px 20px 20px;

			.create-item {
				display: flex;
				align-items: center;
				width: 100%;
				border-bottom: 1px solid #f5f5f5;
				background-color: #fff;
				padding: 16px 15px;
				box-sizing: border-box;
				position: relative;



				.detail-tally-imgs {
					background-color: #fff;
					display: flex;
					align-items: center;

					.grid-item-box {
						width: 100px;
						height: 100px;
						position: relative;

						&:nth-child(3n+1) {
							margin-left: 0;
						}

						.tally-img {
							width: 100%;
							height: 100%;
						}

						.play-icon-bg {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							background-color: rgba(0, 0, 0, 0.3);
							z-index: 20;

							.play-icon {
								position: absolute;
								top: 50%;
								left: 50%;
								font-size: 30px;
								color: #fff;
								margin-left: -15px;
								margin-top: -15px;
							}
						}

						.delete-icon {
							position: absolute;
							top: -10px;
							right: -10px;
							color: #FF1010;
							background-color: #fff;
							font-size: 22px;
							border-radius: 50%;
							z-index: 99;
						}

						&.detail-tally-img-add {
							text-align: center;
							line-height: 100px;
							border: 1px solid #efefef;
							box-sizing: border-box;

							.add-icon {
								font-size: 28px;
								color: #999999;
							}
						}
					}
				}



				.right-arrow-icon {
					position: absolute;
					right: 10px;
				}

				&:first-child {
					// border-top: 1px solid #f5f5f5;
					border-top-left-radius: 4px;
					border-top-right-radius: 4px;
				}

				&:last-child {
					border-bottom-left-radius: 4px;
					border-bottom-right-radius: 4px;
				}

				.info-item-title {
					width: 85px;
					flex: 0 0 85px;
					font-size: 14px;
					margin-right: 10px;
				}

				.date-picker {
					font-size: 14px;
					color: #666;

					&.placeholder-text {
						color: #ddd;
					}
				}

				.info-item-input {
					flex: 1;
					font-size: 14px;
					text-align: left;
					color: #666666;
				}

				.placeholderFontClass {
					color: #ddd;
				}

				&.item-column {
					flex-direction: column;
					align-items: unset;

					.info-item-title {
						flex: unset;
						margin-right: 0;
						height: auto;
						width: 100%;
					}

					.grid-item-box {
						margin-top: 10px;
					}
				}
			}


		}

		.create-btn {
			margin: 20px;
			border: none;
			background-color: #FFA53D;
			color: #fff;
			font-size: 15px;
			height: 35pt;
			line-height: 35pt;
			box-shadow: inset 0px 4px 7px 0px rgba(255, 255, 255, 0.33);

			&::after {
				border: none;
			}

			&:active {
				background-color: rgba(255, 141, 10, 1);
			}
		}

		.height {
			height: 30px;
		}
	}
</style>